.score_task {
    height: 100vh;
    width: 100%;
    .score_task_content {
        width: 100%;
        height: 100%;
        background-color: #f8f8f8;
        .taskFix {
            top: 0;
            right: 0;
            left: 0;
            z-index: 2;
        }
        // 头部背景
        .head_bg {
            width: 100%;
            height: 320rpx;
            z-index: 1;
            image {
                width: 100%;
                height: 100%;
            }
        }
        // 签到
        .sign_in {
            z-index: 2;
            margin-top: -90rpx;
            padding: 0 32rpx;
            .sign_in_box {
                padding: 32rpx;
                border-radius: 16rpx;
                background-color: #fff;
                .text {
                    font-weight: 600;
                    font-size: 32rpx;
                    line-height: 1em;
                    color: #333;
                    span {
                        color: #FF4642;
                    }
                }
                .sign_in_content {
                    margin: 32rpx 0;
                    .part {
                        flex: 1;
                        padding: 16rpx 0;
                        border-radius: 10rpx;
                        background-color: #F8F8FB;
                        margin: 0 5rpx;
                        border: 1px solid #eaecf4;
                        image {
                            width: 30rpx;
                            height: 30rpx;
                            margin: 10rpx 0;
                            margin-top: 35rpx;
                        }
                        &:first-child {
                            margin-left: 0 !important;
                        }

                        &:last-child {
                            margin-right: 0 !important;
                        }

                        .circle {
                            font-size: 20rpx;
                            color: #999;
                            bottom: 0;
                            left: 0;
                            right: 0;
                        }
                        .date {
                            padding: 8rpx 0;
                            font-size: 24rpx;
                            color: #999;
                            line-height: 1em;
                            background: #eaecf4;
                            border-radius: 8rpx 8rpx 0 0 ;
                            top: 0;
                            right: 0;
                            left: 0;
                        }
                    }
                }
                .button {
                    border-radius: 1998rpx;
                    background: linear-gradient(to bottom, #FF504C, #FF977B);
                    span {
                        display: block;
                        line-height: 80rpx;
                        font-size: 32rpx;
                        color: #fff;
                    }
                }
            }
        }
        // 当前积分
        .integral {
            padding: 16rpx 32rpx;
            .integral_bg {
                image {
                    width: 100%;
                    height: 158rpx;
                    border-radius: 16rpx;
                }
            }
            .integral_box {
                width: 93%;
                top: 0;
                padding: 50rpx;
                .text {
                    p {
                        font-size: 48rpx;
                        font-weight: 600;
                        line-height: 1em;
                        color: #fff;
                    }
                    span {
                        padding-top: 18rpx;
                        display: block;
                        color: #fff;
                        font-size: 28rpx;
                        line-height: 1em;
                    }
                }
                .button {
                    span {
                        border-radius: 12rpx;
                        background: linear-gradient(to bottom, #fff, #FFD6CB);
                        display: inline-block;
                        padding: 0 48rpx;
                        line-height: 80rpx;
                        font-size: 28rpx;
                        color: #FF4642;
                    }
                }
            }
        }
        // 积分任务
        .task {
            margin: 40rpx;
            .scroll {
                height: 570rpx;
            }
            .task_box {
                padding: 32rpx 32rpx 0 32rpx;
                background-color: #fff;
                max-height: 470rpx;
                border-radius: 18rpx;
                .title {
                    line-height: 36rpx;
                    padding-bottom: 24rpx;

                    p {
                        font-size: 36rpx;
                        font-weight: 600;
                        color: #333
                    }

                    span {
                        font-size: 24rpx;
                        color: #999;
                    }
                }

                .part {
                    padding: 24rpx 0;
                    .left {
                        color: #333;
                        p {
                            font-weight: 100;
                            font-size: 28rpx;
                            line-height: 1em;
                            padding-bottom: 16rpx;
                            span {
                                font-size: 24rpx;
                                padding-left: 10rpx;
                                color: #333;
                            }
                        }

                        span {
                            font-size: 24rpx;
                            line-height: 1em;
                            color: #FF4642;
                        }
                    }

                    .right {
                        span {
                            width: 136rpx;
                            height: 72rpx;
                            text-align: center;
                            border: 2rpx solid #FF4642;
                            border-radius: 12rpx;
                            box-sizing: border-box;
                            font-weight: 600;
                            font-size: 24rpx;
                            line-height: 72rpx;
                            color: #FF4642;
                        }
                    }
                }
            }
            .task_box + .task_box {
                padding: 20rpx 32rpx 0 32rpx;
                margin: 20rpx 0;
            }
        }
    }
    .popup{
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        padding: 25% 25%;
        box-sizing: border-box;
        z-index: 3;
        .transparent{
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: rgba(#000,0.6);
        }
        .popup_box{
            width: 100%;
            border-radius: 24rpx;
            background-color: #fff;
            padding: 64rpx;
            .icon{
                width: 96rpx;
                height: 96rpx;
                border-radius: 50%;
                background-color: #FF4642;
                &::after{
                    content: "";
                    position: absolute;
                    top: 55%;
                    left: 20%;
                    transform: translateY(-50%);
                    width: 28rpx;
                    height: 8rpx;
                    background-color: #fff;
                    border-radius: 1998rpx;
                    transform: rotate(45deg);
                }
                &::before{
                    content: "";
                    position: absolute;
                    top: 45%;
                    left: 34%;
                    transform: translateY(-50%);
                    width: 48rpx;
                    height: 8rpx;
                    background-color: #fff;
                    border-radius: 1998rpx;
                    transform: rotate(-45deg);
                }
            }
            .fail_icon{
                width: 96rpx;
                height: 96rpx;
                border-radius: 50%;
                background-color: #BBBBBB;
                &::after{
                    content: "";
                    position: absolute;
                    top: 48%;
                    left: 20%;
                    transform: translateY(-50%);
                    width: 56rpx;
                    height: 8rpx;
                    background-color: #fff;
                    border-radius: 1998rpx;
                    transform: rotate(45deg);
                }
                &::before{
                    content: "";
                    position: absolute;
                    top: 48%;
                    left: 20%;
                    transform: translateY(-50%);
                    width: 56rpx;
                    height: 8rpx;
                    background-color: #fff;
                    border-radius: 1998rpx;
                    transform: rotate(-45deg);
                }
            }
            .text{
                padding-top: 32rpx;
                font-size: 28rpx;
                color: #333333;
                line-height: 1em;
                font-weight: 600;
            }
        }
    }
}
.sign_in_color {
    border: 1px solid #FF5445!important;
    .circle {
        color: #FF5445 !important;
    }

    .date {
        background: #FF5445!important;
        color: #fff !important;
    }
}

.receive {
    border: none !important;
    color: #fff !important;
    background: linear-gradient(to right, #FF504C, #FF977B);
}

.already_receive {
    border: none !important;
    color: #999 !important;
    background-color: #F8F8FB;
}